<template>
	<view>
		<image src="@/static/code.png" class="content">
		</image>
		<view class="contenta">
			<view class="head">
				<view class="left">
			  	<view class="titleHead">验证身份</view>
					<view class="title">请输入您的手机号验证身份</view>
				</view>
				
			</view>
			<view class="cardTag">
				
				<view class="card">
					<u-form :model="form" ref="uForm">
						<u-form-item >
							<view
								style="display: flex;align-items: center;background: #fbfbfb;height: 110rpx;width:100%">
								<u-input clearable v-model="form.account" placeholder="请输入身份证号码" />
							</view>
						</u-form-item>
				 <u-form-item  >
				 <view
				 			style="display: flex;align-items: center;background: #fbfbfb;height: 110rpx;width:100%">
				 		<u-input clearable v-model="form.password"  placeholder="请输入验证码" >
						<template #suffix>
						<up-code
											ref="uCode2"
										    @change="codeChange2"
											start-text="获取验证码"
										></up-code>
										<text
										    @tap="getCode2"
										    :text="tips2"
											class="u-page__code-text"
										>{{tips2}}</text>
				    	</template>	
							</u-input>
				 	</view>
				 </u-form-item>
					</u-form>
					
					<view class="square" :class="add?'squareNext':''" @click="submit()">
						下一步
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>
<script>
	import {LoginApi} from "@/comms/api/loginApi";
	export default {
		data() {
			return {
				value:'',
				tips2: '获取验证码',
				IndexTag: 0,
				add:false,
				seconds:60,
				form: {
					account: '',
					password: ''
				},
			}
		},
		watch: {
			IndexTag(oldValue) {
	
			this.form = {
					account: '',
					password: ''
				}
			},
			form: {
				deep: true,
				handler(newvalue) {
					let data = ['', undefined, null]
					let val = 0
					Object.keys(newvalue).map(key => {
						if (!data.includes(newvalue[key])) {
							val += 1
						}
					})
					if (val == 2 ) {
						this.add = true
					} else {
						this.add = false
					}
				},
			},
		},
		methods: {
			
			submit(){
				if(this.add){
					
					uni.navigateTo({
						url:'/pages/verify/edictpassword'
					})
				}
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background-size: 100% 100%;
		box-sizing: border-box;

	}

	.contenta {
		position: absolute;
		top: 0rpx;
		width: 100%;

	}

	
.yhxy{
	display: flex;
	align-items: center;
	padding: 40rpx;
	font-size: 26rpx;
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: Regular;
	text-align: left;
	color: #666666;
	position: fixed;
	bottom: 80rpx;
	left: 40rpx;
	text{
		color: #1763FC;
	}
}
.titleHead{
	font-size: 64rpx;
	font-family: PingFang SC, PingFang SC-Semibold;
	font-weight: Semibold;
	text-align: left;
	color: #3f4151;
	font-weight: 500;
line-height: 100rpx;
}
	
	.head {
		width: 670rpx;
		height: 232rpx;
		margin: 48rpx auto 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.title {
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: Regular;
			text-align: left;
			color: #3f4151;
			line-height: 48rpx;
		}
		.img {
			width: 168rpx;
			height: 64rpx;
		}

		.img1 {
			width: 144rpx;
			height: 144rpx;
		}
	}
	.card {
		width: 670rpx;
		background: #FFF;
		border-radius: 20rpx;
		margin: auto;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
	}
	.cardTag {
		width: 670rpx;
		background: #FFF;
		border-radius: 20rpx;
		margin: auto;
	}
	.squareNext{
		opacity: 1 !important;
	}
	.square {
		width: 610rpx;
		height: 110rpx;
		background: #1763FC;
		border-radius: 20rpx;
		text-align: center;
		line-height: 110rpx;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: Regular;
		text-align: center;
		color: #ffffff;
		margin: 40rpx 0;
		opacity: 0.5;
	}
	

	.headcard {
		width: 100%;
		height: 100rpx;
		background: #fbfbfb;
		display: flex;
		justify-content: space-between;
		border-radius: 20rpx 20rpx 0 0;
		line-height: 100rpx;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: Regular;
		text-align: left;
		color: #666666;
	}
	.active,
	.active1 {
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Semibold;
		font-weight: Semibold;
		text-align: center;
		color: #1763fc !important;
		position: relative;
		background: white;
		font-weight: bold;

	}

	.leftcard {
		flex: 1;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;
		text-align: center;

	}
     ::v-deep .u-border {
		border: none !important;
	}
	.righcard {
		flex: 1;
		border-radius: 0rpx 20rpx 0 20rpx;
		text-align: center;
	}
	.wjmm{
		width: 100%;
		text-align: right;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: Regular;
		color: #1763fc;
	}
</style>